import React, { Component } from 'react'

// 引入路由模块 Route渲染组件路由  Link/NavLink 声明式导航
import { Route, Link,withRouter } from 'react-router-dom'

import Child1 from './views/Child1'
import Child2 from './views/Child2'

// 装饰器
@withRouter
class App extends Component {

  constructor(props) {
    super(props)

    // 路由监听
    this.props.history.listen(route => {
      console.log(route)
      // 访问页面数据统计 可以此处写网络请求，把数据发给后端
      /* if (route.pathname !== '/login') {
        console.log('要登录一下');
      } */
    })
  }

  state = {
    count: 1
  }

  incr = () => {
    this.setState(state => {
      return {
        count: state.count + 1
      }
    })
  }

  render() {
    return (
      <>
        <button onClick={this.incr}>自增一下</button>
        <hr />
        {/* 声明式导航 Link/NavLink 转译后生成的dom为a标签 li span div h3 */}
        {/* <li><Link to="/child1">Child1页面</Link></li> */}
        {/* <li><Link to="/child2">Child2页面</Link></li> */}

        {/* 定义路由规则和匹配成功后渲染 */}
        {/* 
          component渲染方式1 使用最多方式 直接使用组件的类
          不通把父组件中的数据通过props传给路由组件中
        */}
        {/* <Route path="/child1" component={Child1} />
        <Route path="/child2" component={Child2} /> */}
        {/* 
          component渲染方式2 函数
          使用函数，可以写条件判断，根据条件来渲染不同组件
          可以通过props来完成父组件中的数据向路由渲染组件传
          缺点：每次匹配路由成功都会重新创建组件 --- 效率低下，不建议使用
        */}
        {/* <Route path="/child1" component={() => {
          return <Child1 count={this.state.count} />
        }} />
        <Route path="/child2" component={() => <Child2 />} /> */}

        {/* 
          render方式渲染 使用函数方式，
          如果匹配相同，则不重新创建，效率更高
          建议如果组件对象方式渲染(函数形式) 推荐使用render
        */}

        {/* <Route path="/child1" render={() => {
          if(this.state.count===1){
            return <Child1 count={this.state.count} />
          }else{
            return <Child2 />
          }
        }} />
        <Route path="/child2" render={() => <Child2 />} /> */}

        {/* 
          children渲染方式

        */}
        {/* <Route path="/child1" component={Child1} /> */}
        {/* 
          children渲染方式1
          children 使用组件对象方式，必须要匹配到path的路由规则才渲染 和 render和componet功能一样
        */}
        {/* <Route path="/child2" children={<Child2 />} />  */}
        {/* 
          children渲染方式2
          函数方式：不管是否和path匹配都渲染
        */}
        {/* <Route path="/child2" children={({ match }) => {
          // match为null表示当前的路由规则和path规则不匹配，如果为对象则匹配成功
          if(match){
            return <Child2 />
          }
          return <></>
        }} /> */}

        {/* 路由对象传递 */}
        {/* component类方式 自动把路由对象对过props传过去 history/location/match */}
        {/* <Route path="/child1" component={Child1} /> */}
        {/* component函数方式，路由对象需要手动传过去 */}
        {/* <Route path="/child1" component={route => <Child1 {...route} />} /> */}
        {/* render 手动方式 */}
        {/* <Route path="/child1" render={route => <Child1 {...route} />} /> */}
        {/* children 手动方式 */}
        {/* <Route path="/child1" render={route => {
          if(route.match){
            return <Child1 {...route} />
          }
          return <></>
        }} /> */}

        {/* 编程式导航 */}
        <Route path="/child1" component={Child1} />
        <Route path="/child2/:name" component={Child2} />
      </>
    )
  }

}

export default App
